<template>
    <div>
        <content-head>
            <div class="project-head">
                <div class="left">
                    <div class="project-round">
                        <span></span>
                    </div>
                    <div class="project-detail">
                        <p>创建项目</p>
                        <p>创建一个令人愉快的项目</p>
                    </div>
                </div>
                <div>
                    <ButtonGroup>
                        <Button :type="flag === 0?'primary': 'default'" style="width: 80px" @click="flag = 0">数据库</Button>
                        <Button :type="flag === 1?'primary': 'default'" style="width: 80px" @click="flag = 1">API</Button>
                    </ButtonGroup>
                </div>
            </div>
        </content-head>
        <div class="project-content">
            <div class="db-list" v-if="flag === 0">
                <div class="db-title">
                    <label>数据库</label><div style="margin-left: 8px"><Input v-model="dataSourceName" readonly></Input></div>
                    <Button @click="syncDB" type="primary">同步</Button>
                    <Button @click="autoCrud" type="info">激活API</Button>
                    <Button  @click="unAutoCrud" type="error">停止API</Button>
                </div>
                <Table :data="dataList" :columns="tableColumns" highlight-row stripe ref="dbColumn"></Table>
            </div>
            <div v-if="flag === 1">
                <project-api :id="projectId"></project-api>
            </div>
        </div>
    </div>
</template>

<script>
    import ContentHead from './contentHead';
    import DbExpand from './dbExpand';
    import ProjectApi from './projectApi';
    export default {
        data(){
            return {
                flag: 0,
                projectId: this.$route.query.id,
                dataSourceId: '',
                dataSourceName: '',
                dataList:[],
                param : {
                    orders: [
                        {
                            fieldName: 'name',
                            orderType: 'ASC'
                        }
                    ],
                    pageParms: {
                        pageIndex: 0,
                        pageSize: 10000,
                    }
                },
                tableColumns: [
                    {
                        type: 'expand',
                        width: 50,
                        render: (h, params) => {
                            return h(DbExpand, {
                                props: {
                                    row: params.row,
                                    tableList: this.dataList
                                }
                            });
                        }
                    },
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '表名',
                        key: 'name'
                    },
                    {
                        title: '实体(PO)名',
                        key: 'className'
                    },
                    {
                        title: '注释',
                        key: 'comments'
                    },
                    {
                        title: 'CRUD API',
                        render: (h, params) => {
                            if (params.row.isAutoCrud == '0') {
                                return h('span',{},'否');
                            } else {
                                return h('span',{},'是');
                            }
                        }
                    }
                ],
            };
        },
        components:{
            ContentHead,
            ProjectApi
        },
        created(){
            this.initDb();
        },
        methods: {
            initDb() {
                this.$http.get('/codegen/api/v1/projects/' + this.projectId + '/show').then((response) => {
                    let dbList = response.data.project.datasources;
                    this.dataSourceId = dbList[0].id;
                    this.dataSourceName = dbList[0].name;
                    this.getDbColumnList();
                });
            },
            getDbColumnList(){
                this.$http.post('/codegen/api/v1/datasources/' + this.dataSourceId + '/tables', this.param).then((response) => {
                    this.dataList = response.data.data;
                });
            },
            //同步数据库
            syncDB() {
                this.$http.get('/codegen/api/v1/datasources/' + this.dataSourceId + '/tables/sync').then((response) => {
                    if (response.data.statusCode == '200') {
                        this.$http.post('/codegen/api/v1/datasources/' + this.dataSourceId + '/tables',this.param).then((response) => {
                            this.dataList = response.data.data;
                            this.$Message.success('同步成功');
                        });
                    }
                });
            },
            // 激活CRUD
            autoCrud(){
                let tabIds = {
                    datasourceId: this.dataSourceId,
                    ids: []
                };
                let arry = this.$refs['dbColumn'].getSelection();
                if (arry && arry.length > 0){
                    arry.forEach((item)=>{
                       if (item.isAutoCrud === '0') {
                           tabIds.ids.push(item.id);
                       }
                    });
                } else {
                    this.$Message.error('请选择未激活crud api的表项');
                }
                this.$http({
                    method: 'put',
                    url: '/codegen/api/v1/tables/autocrud/change/active',
                    data: tabIds,
                    showLoading : true
                }).then(() => {
                    this.getDbColumnList();
                    this.$Message.success('crud api激活成功');
                });
            },
            unAutoCrud(){
                let tabIds = {
                    datasourceId: this.dataSourceId,
                    ids: []
                };
                let arry = this.$refs['dbColumn'].getSelection();
                if (arry && arry.length > 0){
                    arry.forEach((item)=>{
                        if (item.isAutoCrud === '1') {
                            tabIds.ids.push(item.id);
                        }
                    });
                } else {
                    this.$Message.error('请选择已激活crud api的表项');
                }
                this.$http({
                    method: 'put',
                    url: '/codegen/api/v1/tables/autocrud/change/inactive',
                    data: tabIds,
                    showLoading : true
                }).then(() => {
                    this.getDbColumnList();
                    this.$Message.success('crud api已停止');
                });
            }

        }
    };
</script>

<style scoped lang="scss">
    .project-content {
        width: 1024px;
        margin: 18px auto;
        background-color: #fff;
        padding: 16px;

        .db-list{
            &>div{
                margin-bottom: 16px;
            }

            .db-title{
                display: flex;
                align-items: center;

                &>div,button{
                    margin-right: 12px;
                }
            }
        }

    }
</style>